css 中的 scope 为什么可以实现局部作用

.form-box[data-v-1f0d3cba]

vue

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>

vue

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

css 中的 scope 为什么可以实现局部作用 ​